<ui:composition template="/WEB-INF/templates/main-template.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">
	<ui:param name="pageName" value="Add Primary Skills"></ui:param>
	<ui:define name="sidebar">
		<ui:include src="/WEB-INF/templates/public-sidebar.xhtml" />
	</ui:define>
	<ui:define name="content">

		<h:form id="PrimarySkill">
			<p:growl id="growl"/>
			<h:panelGrid style="width: 100%;">
				<h:panelGrid style="width: 100%"
					columnClasses="gridCellBottomLeftAligned, gridCellBottomRightAligned"
					columns="2">
					<h:outputText value="Primary Skills" styleClass="outputTextTitle" />
					<p:commandButton value="Add New Skill"
						actionListener="#{primarySkillsBean.addNewSkillClicked}"
						update="@form" />
				</h:panelGrid>

				<h:outputText value="New Skill Details" styleClass="outputTextSubTitle" rendered="#{primarySkillsBean.RENDER_CREATION_PANEL}"/>
				<h:panelGrid columns="4" cellspacing="8" rendered="#{primarySkillsBean.RENDER_CREATION_PANEL}" style="background-color: #F3F3F3; width: 100%;" columnClasses="gridCellBottomLeftAligned, gridCellBottomLeftAligned, gridCellBottomLeftAligned, gridCellBottomRightAligned">
					<h:panelGroup>
					<h:outputLabel value="Select Technology" />
					<h:panelGroup>
						<p:selectOneMenu id="modulesMenu" value="#{primarySkillsBean.technologyId}"
							style="width:170px;">
							<f:selectItem itemLabel="" itemValue=""/>
							<f:selectItems value="#{primarySkillsBean.technologiesMap}" />
						</p:selectOneMenu>
						<p:watermark for="modulesMenu" value="Select Technology" />
					</h:panelGroup>
					</h:panelGroup>
					<h:panelGroup>
					<h:outputLabel value="New Skill" />
					<p:inputText value="#{primarySkillsBean.skill.skill}"
						title="New Skill" />
					</h:panelGroup>
					<h:panelGroup>	
					<h:outputLabel value="Display Name" />
					<p:inputText value="#{primarySkillsBean.skill.displayName}"
						title="New Skill" />
					</h:panelGroup>

					<h:panelGrid columns="2" style="float: right">
						<p:commandButton value="Save" actionListener="#{primarySkillsBean.saveSkill}" update="@form" />
						<p:commandButton value="Discard" actionListener="#{primarySkillsBean.discardSkill}" update="@form" />
					</h:panelGrid>
				</h:panelGrid>

				<h:panelGrid style="width: 100%"
					rendered="#{primarySkillsBean.skillsList.size() ne 0}">
					<h:outputText value="Available Skills"
						styleClass="outputTextSubTitle" />
					<p:dataTable value="#{primarySkillsBean.skillsList}" var="row" id="skillsTable" editable="true"
						binding="#{primarySkillsBean.assignedSkillsTable}">
						<p:ajax  event="rowEdit" update=":PrimarySkill:growl :PrimarySkill:skillsTable"  listener="#{primarySkillsBean.updatePrimarySkill}" />
						<p:column headerText="Module Name " sortBy="#{row.technology.displayName}">
									<h:outputText value="#{row.technology.displayName}" />
						
						</p:column>

						<p:column headerText="Skill" sortBy="#{row.skill}">
							<p:cellEditor>
								<f:facet name="output">
									<h:outputText value="#{row.skill}" />
								</f:facet>
								<f:facet name="input">
									<p:inputText value="#{row.skill}" />
								</f:facet>
							</p:cellEditor>
						</p:column>
						
						<p:column headerText="Display Name " sortBy="#{row.displayName}">
							<p:cellEditor>
								<f:facet name="output">
									<h:outputText value="#{row.displayName}" />
								</f:facet>
								<f:facet name="input">
									<p:inputText value="#{row.displayName}" />
								</f:facet>
							</p:cellEditor>
						</p:column>
						
						<p:column headerText="Edit" style="width:50px">
							<p:rowEditor />
						</p:column>
					</p:dataTable>

				</h:panelGrid>
			</h:panelGrid>



			<p:confirmDialog widgetVar="confirmation" id="confirmation"
				severity="alert"
				message="This will submit primary skill(s). Proceed?">
				<h:panelGroup style="text-align: right; float: right;">
					<p:commandButton value="Yes, Submit Now"
						action="#{primarySkillsBean.submitPrimarySkillsAction}"
						update="@form" oncomplete="confirmation.hide()">
						<f:param name="notes" value="inActiveNotes" />
					</p:commandButton>
					<p:commandButton value="Not Yet" onclick="confirmation.hide()"
						type="button" />
				</h:panelGroup>
			</p:confirmDialog>

		</h:form>
	</ui:define>
</ui:composition>

